<template>
    <div class="ph-input-wrap" data-ph="color-picker">
        <ph-input :placeholder="placeholder" :value="value" @change="onChange" :disabled="disabled"/>
        <ph-color-button class="ph-input-raddon" :value="value" :preshow="preshow" :precolors="precolors" @pick="onPick" :disabled="disabled"/>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { PhColorButton } from '../base'
import { parseColor } from 'ph-color-util'
import PhInput from './input.vue'
export default defineComponent({
    props:{
        placeholder:{type:String},
        disabled:{type:Boolean,default:false},
        value:{type:String,default:"#00000000"},
        preshow:{type:Boolean,default:true},
        precolors:{type:Array as PropType<Array<string>>},
        inputValidate:{type:Boolean,default:true}
    },
    setup(props,{emit}) {
        const onPick = (v:string)=>{
            emit("change",v)
        }
        const onChange = (e:Event)=>{
            e.stopImmediatePropagation()
            e.preventDefault()
            const target = e.target as HTMLInputElement
            const v = target.value as string
            if(!props.inputValidate||parseColor(v).rgba)
            emit("change",v)
        }
        return {onPick,onChange}
    },
    components:{
        PhInput,
        PhColorButton
    }
})
</script>
